<template>
   <div class="brand">
            <div class="py-container">
                <ul class="brand-list" @click="gosearch">
                    <li class="brand-item" v-for="(brandlist,index) in brandList" :key="brandlist.id" >
                        <img :src="brandlist.imgUrl" :title="brandlist.title"  :data-brandListTitle="brandlist.title"/>
                    </li>
                 
                </ul>
            </div>
        </div>

</template>

<script>
import { mapState } from 'vuex'
export default {
    data(){
        return{
           
        }
    },
    name:'MyBrand',
    mounted(){
        this.$store.dispatch('getbrandList')
    },
    computed: {
    // mapState也可通过调用state中的属性并指定
    ...mapState({
       brandList: (state) => state.home.getBrandList,
    }),
   
    } ,
    methods: {
        gosearch(event){
            let element =event.target;
        let {brandlisttitle} =element.dataset
        if(brandlisttitle){
            let location ={
                name:'Search'
            }
            let query={
                keyword:brandlisttitle
            }
            if (this.$route.params) {
          location.query = query;
          location.params = this.$route.params;

          this.$router.push(location);
        }
        }
        }
    },

}
</script>

<style lang="less" scoped>
  .brand {
        margin: 10px 0;

        .py-container {
            width: 1200px;
            margin: 0 auto;

            .brand-list {
                overflow: hidden;
                padding: 15px 0;
                background: #f7f7f7;
                line-height: 18px;

                .brand-item {
                    width: 120px;
                    float: left;
                    height: 37px;

                    img {
                        border-left: 1px dotted #ccc;
                        padding: 0 10px;
                    }

                    &:first-child {
                        img {
                            border-left: 0;
                        }
                    }
                }
            }
        }
    }

</style>